<template>
  <view class="user-activity">
    <view class="section-header">
      <text class="section-title">最近活动</text>
    </view>
    <view class="activity-list" v-if="activityList.length > 0">
      <view class="activity-item" v-for="(item, index) in activityList" :key="index" @click="onItemClick(item)">
        <view class="activity-icon">
          <image class="icon-image" :src="getActivityIconPath(item.type)" :style="{ backgroundColor: getActivityBgColor(item.type) }" mode="aspectFit"></image>
        </view>
        <view class="activity-content">
          <view class="activity-title">{{ item.title }}</view>
          <view class="activity-desc">{{ item.description }}</view>
        </view>
        <view class="activity-time">{{ formatTime(item.time) }}</view>
      </view>
    </view>
    <view class="empty-activity" v-else>
      <text class="empty-text">暂无活动记录</text>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  activityList: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['itemClick']);

const onItemClick = (item) => {
  emit('itemClick', item);
};

// 根据活动类型获取对应的图标路径
const getActivityIconPath = (type) => {
  const iconMap = {
    order: 'package',
    payment: 'wallet',
    coupon: 'coupon',
    review: 'comment',
    store: 'location',
    default: 'history'
  };
  const iconName = iconMap[type] || iconMap.default;
  return `/static/icons/${iconName}.png`;
};

// 根据活动类型获取对应的背景颜色
const getActivityBgColor = (type) => {
  const colorMap = {
    order: '#FFF3F0',
    payment: '#F1F8E9',
    coupon: '#FFF8E1',
    review: '#E3F2FD',
    store: '#F3E5F5',
    default: '#ECEFF1'
  };
  return colorMap[type] || colorMap.default;
};

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return '';
  
  const now = new Date();
  const date = new Date(timestamp);
  const diff = Math.floor((now - date) / 1000); // 差异秒数
  
  if (diff < 60) {
    return '刚刚';
  } else if (diff < 3600) {
    return Math.floor(diff / 60) + '分钟前';
  } else if (diff < 86400) {
    return Math.floor(diff / 3600) + '小时前';
  } else if (diff < 604800) {
    return Math.floor(diff / 86400) + '天前';
  } else {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
};
</script>

<style lang="scss" scoped>
.user-activity {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 0;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20rpx 20rpx;
    padding: 0 10rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  
  .activity-list {
    padding: 0 30rpx;
  }
  
  .activity-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .activity-icon {
      margin-right: 20rpx;
      
      .icon-image {
        width: 60rpx;
        height: 60rpx;
        padding: 10rpx;
        border-radius: 50%;
      }
    }
    
    .activity-content {
      flex: 1;
      
      .activity-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
      }
      
      .activity-desc {
        font-size: 24rpx;
        color: #666;
      }
    }
    
    .activity-time {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .empty-activity {
    padding: 40rpx 0;
    text-align: center;
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
